<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<head>
 
  <link rel="icon"
        type="image/x-iconccs"
        href="static/favicon.ico" />
  <link rel="stylesheet"
        type="text/css"
        href="static/bulletin.css" />

  <title>Public Bulletin</title>

<script type=text/javascript>
function openSubmitFrame() {
  document.getElementById('submitFrame').style.display = 'block';
  document.getElementById('submitFrame').style.visibility = 'visible';
}

function closeSubmitFrame() {
  document.getElementById('submitFrame').style.display = 'none';
  document.getElementById('submitFrame').style.visibility = 'hidden';
}
</script>
<div id="container">
    <ul>
      <li>
        <a href='/'>Bulletin Boards</a>

        <div>
          <ul>
            <li>
              <h2><a href="community.html">Community Events</a></h2>
            </li>

            <li>
              <h2><a href="school.html">School Events</a></h2>
            </li>
          </ul>
        </div>
      </li>

      <li>Submit New Sticky

        <ul>
          <li>
            <h2>Enter your note<br /></h2>

            <form action="/community.html"
                  method="post">
              Name: <input name='name' /><br />
              Message: <input name='message' /><br />
              <input type="submit" />
            </form>
          </li>
        </ul>
      </li>

      <li>Submit Image

        <ul>
          <li>
            <h2>Paste Image URL<br /></h2>

            <form action="/community.html"
                  method="post">
              Name: <input name='name' /><br />
              URL: <input name='message' /><br />
              <input type="submit" />
            </form>
          </li>
        </ul>
      </li>

      <li><a href="developer.html">Developer Information</a></li>

      <li>Search

        <ul>
          <li>
            <form action="/search"
                  method="get">
              <h2>Text: <input name='message' /><br />
              <input type="checkbox"
                     name="text"
                     value="true" />Text<br />
              <input type="checkbox"
                     name="author"
                     value="true" />Author<br />
              <input type="submit" /></h2>
            </form>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <table id='tablemain'> <tr>

  {% for note in Stickynotes %}
     <td>

    {% if "http://" in note.text %}
    <div class="notetext">  <img src ="{{  note.text  }}"></div>
    {% else %}
      <div class='noteyes'><div class="notetext"> {{  note.text  }}</div></div>
    {% endif %}

    </td>
 
  {% endfor %}

      </tr>
   </table>


<script>
  var myTable = document.getElementById('tablemain');
  var myCells = myTable.getElementsByTagName('td');

  var mouseX = 0;
  var mouseY = 0;
  //alert(myCells);
  for (var i = 0; i < myCells.length; i++){
   var cell = myCells[i];
   console.log(cell);
   
   var moveEl;
   
   cell.addEventListener('mousedown', function(e){
     console.log(e.type);
     // this.style.position = 'absolute';
      moveEl=this;
      moveEl.style.position='absolute';
      
   }, false, this);
   
   cell.addEventListener('mouseup', function(e){
     console.log(e.type);
      //this.style.position = 'static';
      mouseX = e.clientX;
      mouseY = e.clientY;

      moveEl= null;
      
   }, false, this);
   
   document.addEventListener('mousemove', function(e){
     console.log(e.type,moveEl.style.position, e);
      moveEl.style.top=e.clientY-200+'px';
      moveEl.style.left=e.clientX-200+'px';
      
   }, false, this);
   
  }
  //alert(myTable);

</script>

<div class="logo"><a href= "/"><image src= "static/smallerlogo.png"></a></div>
	</body>

</html>
